<template>
  <div class="Order">
    <div class="header-contant">
      <div class="header-box">
        <div
          class="header-item-contant"
          v-for="(item,index) in headerArr"
          :key="index"
          @click="changeType(index)"
        >
          <div :class="item.cheack?'text-highLight':'text'">{{item.text}}</div>
          <div :class="item.cheack?'number-highLight':'number'">{{item.number}}</div>
        </div>
      </div>
    </div>
    <div class="main-contant" ref="warpper">
      <div>
        <div class="main-item" v-for="(item, index) in OrderList" :key="index">
          <div class="row">
            <div class="left">
              <div class="name">{{item.title}}</div>
              <div class="time">{{item.starttime}}</div>
            </div>
            <div class="right">
              <div class="button" v-if="item.status == 1">已取消</div>
              <div class="button" v-if="item.status == 2">充电中</div>
              <div class="button" v-if="item.status == 3">已完成</div>
            </div>
          </div>
          <div class="row">
            <img :src="lighting" alt>
            <div class="num">{{item.s_code}}号</div>
            <div class="des-text">插头</div>
            <div class="money">￥{{item.price}}</div>
          </div>
        </div>
      </div>
      <div class="nothing-box" v-if="OrderList.length<=0">
        <img :src="nothing" alt>
        <div class="text">暂无订单记录</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions } from "vuex";
import BScroll from "better-scroll";

export default {
  name: "material",
  data() {
    return {
      lighting: require("../../assets/lighting.png"),
      nothing: require("../../assets/nothing.png"),
      headerArr: [
        {
          text: "全部",
          number: "0",
          cheack: true,
          status: 0
        },
        {
          text: "已取消",
          number: "0",
          cheack: false,
          status: 1
        },
        {
          text: "充电中",
          number: "0",
          cheack: false,
          status: 2
        },
        {
          text: "已完成",
          number: "0",
          cheack: false,
          status: 3
        }
      ],
      cheackIndex: 0, // 当前选择的数组
      listScroll: {}, // 滑块
      page: 1, // 分页
      status: 0,
      // 后台
      OrderList: {}
    };
  },
  created() {
    this.change(true);
    // 后台
    this.getOrderList();
  },
  methods: {
    ...mapActions("Home", ["change"]),
    // 改变
    changeType(index) {
      this.cheackIndex = index;
      for (let i in this.headerArr) {
        if (i == this.cheackIndex) {
          this.headerArr[i].cheack = true;
        } else {
          this.headerArr[i].cheack = false;
        }
      }
      this.status = this.headerArr[index].status;
      this.getOrderList();
      this.$forceUpdate();
    },
    getOrderList() {
      this.$dialog.loading.open("正在加载");
      this.page = 1;
      this.$http
        .get("/order/Userlist", {
          params: {
            page: 1,
            status: this.status
          }
        })
        .then(res => {
          // 请求回来的数据相加
          const reslut = res.data.data;
          console.log(res);
          this.headerArr[0].number = reslut.all_num;
          this.headerArr[1].number = reslut.false_num;
          this.headerArr[2].number = reslut.charging_num;
          this.headerArr[3].number = reslut.over_num;
          this.OrderList = reslut.list;
          this.$forceUpdate();
          this.scrollInit();
          this.$dialog.loading.close();
        });
    },
    scrollInit() {
      this.listScroll = new BScroll(this.$refs.warpper, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      // 上拉加载更多
      this.listScroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.page++;
        // 锁定防止多次加载
        this.lock = true;
        this.$http
          .get("/order/Userlist", {
            params: {
              page: this.page,
              status: this.status
            }
          })
          .then(res => {
            // 请求回来的数据相加
            const reslut = res.data.data;
            console.log(res);
            this.headerArr[0].number = reslut.all_num;
            this.headerArr[1].number = reslut.false_num;
            this.headerArr[2].number = reslut.over_num;
            this.OrderList = this.OrderList.concat(reslut.list);
            if (reslut.list.length <= 0) {
              this.$dialog.toast({
                mes: "没有更多的数据",
                timeout: 1500,
                icon: "none"
              });
              this.lock = true;
            } else {
              // 解锁上拉
              this.lock = false;
            }
            this.$forceUpdate();
            this.listScroll.finishPullUp();
            this.listScroll.refresh();
          });
      });
    }
  },
  components: {}
};
</script>
